<template>
	<view class="container">
		<unicloud-db
			ref="udb"
			v-slot:default="{ data, loading, error, options }"
			:options="options"
			collection="services"
			field="_id,level,title,sub_title,desc,icon,day_price,hour_price,month_price"
			:where="queryWhere"
			:getone="true"
			:manual="true"
		>
			<view v-if="error">{{ error.message }}</view>
			<view v-else-if="loading"><uni-load-more :contentText="loadMore" status="loading"></uni-load-more></view>
			<view v-else-if="data" class="detail-rows">
				<el-row>
				  <el-col :span="4"><div class="grid-content bg-purple">服务级别名称</div></el-col>
				  <el-col :span="16"><div class="grid-content bg-purple-light">{{data.title}}:</div></el-col>
				</el-row>
				<el-row>
				  <el-col :span="4"><div class="grid-content bg-purple">等级</div></el-col>
				  <el-col :span="16"><div class="grid-content bg-purple-light">{{data.level}}:</div></el-col>
				</el-row>
				<el-row>
				  <el-col :span="4"><div class="grid-content bg-purple">服务级别副标题</div></el-col>
				  <el-col :span="16"><div class="grid-content bg-purple-light">{{data.sub_title}}:</div></el-col>
				</el-row>
				<el-row>
				  <el-col :span="4"><div class="grid-content bg-purple">套餐说明</div></el-col>
				  <el-col :span="16"><div class="grid-content bg-purple-light">{{data.desc}}</div></el-col>
				</el-row>
				<el-row>
				  <el-col :span="4"><div class="grid-content bg-purple">套餐图</div></el-col>
				  <el-col :span="16"><div class="grid-content bg-purple-light">
				    <el-image 
				      style="width: 100px; height: 100px"
				      :src="data.icon" 
				      :preview-src-list="[data.icon]">
				    </el-image>
					</div>
					</el-col>
				</el-row>
				<el-row>
				  <el-col :span="4"><div class="grid-content bg-purple">日单价</div></el-col>
				  <el-col :span="16"><div class="grid-content bg-purple-light">{{data.day_price}}</div></el-col>
				</el-row>
				<el-row>
				  <el-col :span="4"><div class="grid-content bg-purple">时单价</div></el-col>
				  <el-col :span="16"><div class="grid-content bg-purple-light">{{data.hour_price}}</div></el-col>
				</el-row>
				<el-row>
				  <el-col :span="4"><div class="grid-content bg-purple">月单价</div></el-col>
				  <el-col :span="16"><div class="grid-content bg-purple-light">{{data.month_price}}</div></el-col>
				</el-row>
			</view>
		</unicloud-db>
		<view class="btns">
			<el-button type="primary" @click="handleBack">返回</el-button>
			<el-button type="warn" class="btn-delete" @click="handleDelete">删除</el-button>
		</view>
	</view>
</template>

<script>
// 由schema2code生成，包含校验规则和enum静态数据
import { enumConverter } from '../../js_sdk/validator/services.js';

export default {
	data() {
		return {
			queryWhere: '',
			loadMore: {
				contentdown: '',
				contentrefresh: '',
				contentnomore: ''
			},
			options: {
				// 将scheme enum 属性静态数据中的value转成text
				...enumConverter
			}
		};
	},
	onLoad(e) {
		this._id = e.id;
	},
	onReady() {
		if (this._id) {
			this.queryWhere = '_id=="' + this._id + '"';
		}
	},
	methods: {
		handleUpdate() {
			// 打开修改页面
			uni.navigateTo({
				url: './edit?id=' + this._id,
				events: {
					// 监听修改页面成功修改数据后, 刷新当前页面数据
					refreshData: () => {
						this.$refs.udb.loadData({
							clear: true
						});
					}
				}
			});
		},
		handleBack(){
			uni.navigateTo({
				url: './list',
				events: {
					// 监听修改页面成功修改数据后, 刷新当前页面数据
					refreshData: () => {
						this.$refs.udb.loadData({
							clear: true
						});
					}
				}
			});
		},
		handleDelete() {
			this.$refs.udb.remove(this._id, {
				success: res => {
					// 删除数据成功后跳转到list页面
					uni.navigateTo({
						url: './list'
					});
				}
			});
		}
	}
};
</script>

<style lang="less">
.container {
	padding: 10px;
}

.btns {
	margin-top: 10px;
	display: flex;
	flex-direction: row;
}

.btns button {
	flex: 1;
}

.btn-delete {
	margin-left: 10px;
}
</style>
